<div *ngIf="loggers" class="table-responsive">
    <h2 id="logs-page-heading" jhiTranslate="logs.title">Logs</h2>

    <p [translateValues]="{ total: loggers.length }" jhiTranslate="logs.nbloggers">There are {{ loggers.length }}
        loggers.</p>

    <span jhiTranslate="logs.filter">Filter</span> <input [(ngModel)]="filter" class="form-control" type="text">

    <table aria-describedby="logs-page-heading" class="table table-sm table-striped table-bordered">
        <thead>
        <tr title="click to order">
            <th (click)="orderProp = 'name'; reverse=!reverse" scope="col"><span
                    jhiTranslate="logs.table.name">Name</span></th>
            <th (click)="orderProp = 'level'; reverse=!reverse" scope="col"><span
                    jhiTranslate="logs.table.level">Level</span></th>
        </tr>
        </thead>

        <tr *ngFor="let logger of (loggers | pureFilter:filter:'name' | orderBy:orderProp:reverse)">
            <td><small>{{ logger.name | slice:0:140 }}</small></td>
            <td>
                <button (click)="changeLevel(logger.name, 'TRACE')"
                        [ngClass]="(logger.level=='TRACE') ? 'btn-primary' : 'btn-light'" class="btn btn-sm">TRACE
                </button>
                <button (click)="changeLevel(logger.name, 'DEBUG')"
                        [ngClass]="(logger.level=='DEBUG') ? 'btn-success' : 'btn-light'" class="btn btn-sm">DEBUG
                </button>
                <button (click)="changeLevel(logger.name, 'INFO')"
                        [ngClass]="(logger.level=='INFO') ? 'btn-info' : 'btn-light'" class="btn btn-sm">INFO
                </button>
                <button (click)="changeLevel(logger.name, 'WARN')"
                        [ngClass]="(logger.level=='WARN') ? 'btn-warning' : 'btn-light'" class="btn btn-sm">WARN
                </button>
                <button (click)="changeLevel(logger.name, 'ERROR')"
                        [ngClass]="(logger.level=='ERROR') ? 'btn-danger' : 'btn-light'" class="btn btn-sm">ERROR
                </button>
                <button (click)="changeLevel(logger.name, 'OFF')"
                        [ngClass]="(logger.level=='OFF') ? 'btn-secondary' : 'btn-light'" class="btn btn-sm">OFF
                </button>
            </td>
        </tr>
    </table>
</div>
